<template>
  <div>
    <el-table
      :data="tableData"
      stripe
      border
      @sort-change="sortHandler"
      @selection-change="handleSelectionChange"
      size="small"
    >
      <el-table-column
        type="selection"
        align="center"
        width="50"
      ></el-table-column>
      <el-table-column
        width="100px"
        prop="level"
        label="级别"
        align="center"
      >
        <template slot-scope="scope">
          <div :style="{color:getLevelColor(scope.row.level)}">{{ getLevelDisplay(scope.row.level) }}</div>
        </template>
      </el-table-column>
      <el-table-column
        width="190px"
        prop="serialNumber"
        label="设备出厂ID"
        align="center"
      ></el-table-column>
      <el-table-column
        width="180px"
        prop="ip"
        label="请求IP"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="url"
        label="请求地址"
        align="center"
      ></el-table-column>
      <!-- <el-table-column
        prop="deviceVersion"
        label="设备版本号"
        align="center"
      ></el-table-column> -->
      <!-- <el-table-column
        prop="upgradeStatus"
        label="升级状态"
        align="center"
      >
        <template slot-scope="scope">
          <div :style="{color:getUpgradeStatusColor(scope.row.upgradeStatus)}">
            {{ getUpgradeStatusDisplay(scope.row.upgradeStatus) }}</div>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="requestMessage"
        label="请求信息"
        align="center"
      ></el-table-column>
      <!-- <el-table-column
        prop="responseCode"
        label="状态码"
        align="center"
      ></el-table-column> -->
      <el-table-column
        prop="responseMessage"
        label="返回信息"
        align="center"
      ></el-table-column>
      <!-- <el-table-column
        prop="interval"
        label="时间间隔"
        align="center"
      ></el-table-column> -->
      <el-table-column
        prop="createdAt"
        label="创建时间"
        align="center"
        sortable
        width="155px"
      >
        <template slot-scope="scope">{{ toLocalTime(scope.row.createdAt) }}</template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import * as moment from 'moment';
import { SortType, MomentFormat } from '../../../constants/common';
import { getLevelDisplay, getLevelColor, getUpgradeStatusDisplay, getUpgradeStatusColor } from './service';
import { Message, MessageBox } from 'element-ui';
import { deleteUpgradeLogApi } from '../../../api/upgradeLog';

export default {
  model: {
    prop: 'sort'
  },
  props: {
    sort: {
      type: Object,
      default() {
        return {};
      }
    },
    tableData: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      upgradeActivityLogIdList: []
    };
  },
  methods: {
    handleSelectionChange(value) {
      this.upgradeActivityLogIdList = value.map(item => {
        return item.id;
      });
    },
    sortHandler(data) {
      if (!data.prop || !data.order) return;
      this.sort.sortType = data.order == 'ascending' ? SortType.ASC : SortType.DESC;
      this.$emit('search');
    },
    toLocalTime(ns) {
      return moment(ns).format(MomentFormat);
    },
    getLevelDisplay(level) {
      return getLevelDisplay(level);
    },
    getUpgradeStatusDisplay(status) {
      return getUpgradeStatusDisplay(status);
    },
    getAppenderDisplay(appender) {
      return getAppenderDisplay(appender);
    },
    getSystemTypeDisplay(type) {
      return getSystemTypeDisplay(type);
    },
    remove(id) {
      MessageBox.confirm('确认删除此升级日志吗？', '删除提示', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          deleteUpgradeLogApi(id)
            .then(() => Message.success('删除成功'))
            .catch(error => Message.error(parseError(error)))
            .finally(() => this.$emit('search'));
        })
        .catch(() => {});
    },
    getLevelColor,
    getUpgradeStatusColor
  }
};
</script>
